import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { JsonEditorComponent, JsonEditorOptions } from '@app/shared/common/json-editor/json-editor.component';
import { HttpClient} from '@angular/common/http';
import { ManualSyncInput, MenuIdDto, MenuInfoServiceProxy, MenuInfoSyncServiceProxy, SetMenuConfigInput } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { finalize } from 'rxjs/operators';
import { AppModalComponentBase } from '@shared/common/app-modal-component-base';

@Component({
    selector: 'menu-info-config-modal',
    templateUrl: './menu-info-config-modal.component.html'
})
export class MenuInfoConfigModalComponent extends AppModalComponentBase {

    @ViewChild('modal', { static: true }) modal: ModalDirective;
    @ViewChild('editor', { static: false }) editor: JsonEditorComponent;
    
    @Output() callback: EventEmitter<any> = new EventEmitter<any>();

    editorOptions: JsonEditorOptions;
    
    saving = false;
    loading = false;
    jsonData: any = {};

    title: string;

    data: SetMenuConfigInput;

    dataSynchronous: boolean;
    kind: number;

    constructor(
        injector: Injector,
        private http: HttpClient,
        private _menuInfoServiceProxy: MenuInfoServiceProxy,
        private _menuInfoSyncServiceProxy:MenuInfoSyncServiceProxy
    ) {
        super(injector);
        this.data = new SetMenuConfigInput();

        this.editorOptions = new JsonEditorOptions();
        this.editorOptions.modes = ['text','code', 'tree', 'view']; 
        this.editorOptions.mode = 'text';
        this.editorOptions.schema = {};
        this.editorOptions.expandAll = true;

        this.dataSynchronous = this.setting.getBoolean("App.Synchronous.DataSynchronous");
    }


    show(kind: number) {
        this.loading = true;
        this.kind = kind;

        this.modal.show();

        this._menuInfoServiceProxy.getConfig(kind)
            .pipe(finalize(() => this.loading = false))
            .subscribe(result => {
                this.data.menuId = kind;
                this.data.extensionData = result.extensionData;
                this.data.autoSynchronous = result.autoSynchronous;

                if (this.data.extensionData) {
                    this.jsonData = JSON.parse(this.data.extensionData);
                } else {
                    this.jsonData = {};
                }
            });
    }

    close(): void {
        this.modal.hide();
    }

    save() {
        if (!this.saving && !this.loading) {
            this.saving = true;
            this.data.extensionData = JSON.stringify(this.jsonData, null, 4);

            this._menuInfoServiceProxy.setConfig(this.data)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result => {
                this.notify.success(this.l('SavedSuccessfully'));
                this.callback.emit();
                this.close();
            });
        }
    }
    synchorization(){
        this.message.confirm(this.l('ManualSyncWarningMessage'), this.l('AreYouSure'),
        (isConfirmed) => {
            if (!isConfirmed) return;
            let manualSyncInput = new MenuIdDto();
            manualSyncInput.menuId = this.kind;
            this._menuInfoSyncServiceProxy.syncMenuConfig(manualSyncInput).subscribe(result=>{
                if (result && result.syncResult){
                    this.callback.emit();
                    this.notify.success(this.l('ManualSynchorizationSuccessfully'))
                    this.close();
                }
                else {
                    this.notify.success(this.l('ManualSynchorizationFail'))
                }
            })
        })
    }
}
